import React, { Component } from 'react'

export default class Count extends Component {
  constructor() {
    super()
    // 当前组件的私有数据,要写在构造器中
    // 构造器和render函数中的this一定是组件实例
    // 如果一个组件中的私有数据,不渲染,则可以直接添加到组件实例上
    this.count = 9
    // 如果一个组件中的私有数据,要渲染,就不能直接添加到实例上.应该添加到实例的state属性上面
    // 写在state里面的数据,被称为组件的状态
    this.state = {
      count: 9,
      msg: 'heiheihei ',
    }
  }
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button
          onClick={() => {
            // this.count++
            // console.log(this.count)
            // 注意: 直接修改状态的值,也没有意义,因为页面没有刷新
            // this.state.count++
            // console.log(this.state.count)
            // this.setState有两个功能: 1. 修改状态数据 2. 让组件更新(相当于是刷新页面了)
            // this.setState修改数据是异步的
            this.setState({
              count: this.state.count + 1,
            })
            // console.log(this.state.count)
          }}
        >
          计数+
        </button>
      </div>
    )
  }
}
/*
react.js 

class Component {
    ...忽略
}

React.Component = Component 

export {Component}
export default React



*/
